<template>
  <div :style="{background: autoBGCover(aiContractBG)}" class="wrap">
    <div :style="{background: autoBGCover(aiContractAdvertise)}" class="advertise" />
    <div class="nav_bar mt24">
      <swiper :indicator-dots="true" indicator-active-color="#4DACFD" indicator-color="rgba(0,0,0,0.15)" style="height: 320rpx;">
        <swiper-item v-for="(group, index) in contractTypeList" :key="index">
          <div class="swiper_item">
            <div v-for="contract in group" :key="contract.id" class="contract_item" @tap.stop="getAIContractDictionaryFn(contract)">
              <div :style="{background: autoBGCover(contract.imgType)}" class="contract_bg" />
              <div class="contract_name">{{ contract.text }}</div>
            </div>
          </div>
        </swiper-item>
      </swiper>
    </div>
    <div class="tip">请描述您想要的合同内容，或者需要写进合同的内容</div>
    <u--textarea
      v-model.trim="contractPrompt"
      :show-confirm-bar="false"
      count
      cursor-spacing="100"
      height="574rpx"
      maxlength="1000"
      placeholder="例如：我要一份借款合同，需要担保人，有利息（最少10个字）"
    />
    <div :style="keepBottomSafeDis()" class="suction_bottom_btn">
      <Button :disabled="!contractPrompt" :styles="{background: autoBGCover(aiGenerateContractBtn)}" size="L" @tap="generateContractFn">AI生成合同</Button>
    </div>
    <Popup ref="otherRef">
      <div class="popup_cen" style="width: 700rpx;padding: 30rpx 0 0;">
        <div class="popup_title">
          {{ params.type }}
          <div class="icon_close" style="right: 28rpx;" @tap="otherRef.change()">
            <Icon name="icon-shanchu-4" size="28" />
          </div>
        </div>
        <swiper :indicator-dots="true" indicator-active-color="#4DACFD" indicator-color="rgba(0,0,0,0.15)" style="height: 320rpx;">
          <swiper-item v-for="(group, index) in otherContractTypeList" :key="index">
            <div class="swiper_item">
              <div v-for="otherContract in group" :key="otherContract.id" class="contract_item" @tap.stop="otherContractFn(otherContract)">
                <div :style="{background: autoBGCover(otherContract.imgType)}" class="contract_bg" />
                <div class="contract_name">{{ otherContract.text }}</div>
              </div>
            </div>
          </swiper-item>
        </swiper>
      </div>
    </Popup>
  </div>
</template>
<script lang="ts" setup>

import Button from '@C/Button.vue'
import { autoBGCover, keepBottomSafeDis, onLoad, Router } from '@U/common'
import { computed, reactive, ref } from 'vue'
import Icon from '@C/Icon.vue'
import Popup from '@C/Popup.vue'
import { getAIContractDictionary, getAIContractPrompt } from './request'

const aiContractBG = computed(() => `${import.meta.env.VITE_SHOUDAO_OSS_URL}/ai/ai_contract_bg.png`)
const aiContractAdvertise = computed(() => `${import.meta.env.VITE_SHOUDAO_OSS_URL}/ai/ai_contract_advertise.png`)
const aiContractType1 = computed(() => `${import.meta.env.VITE_SHOUDAO_OSS_URL}/ai/ai_contract_type1.png`)
const aiContractType2 = computed(() => `${import.meta.env.VITE_SHOUDAO_OSS_URL}/ai/ai_contract_type2.png`)
const aiContractType3 = computed(() => `${import.meta.env.VITE_SHOUDAO_OSS_URL}/ai/ai_contract_type3.png`)
const aiContractType4 = computed(() => `${import.meta.env.VITE_SHOUDAO_OSS_URL}/ai/ai_contract_type4.png`)
const aiGenerateContractBtn = computed(() => `${import.meta.env.VITE_SHOUDAO_OSS_URL}/ai/ai_generate_contract_btn.png`)
const contractPrompt = ref('')
const contractTypeList = ref([])
const otherRef = ref()
const otherContractTypeList = ref([])
const commonFn = (data: object, type: array) => {
  data.forEach((item: object, index: number) => {
    switch (index % 4) {
      case 0: item.imgType = aiContractType1.value; break
      case 1: item.imgType = aiContractType2.value; break
      case 2: item.imgType = aiContractType3.value; break
      case 3: item.imgType = aiContractType4.value; break
    }
  })
  const newArray = data.reduce((acc: array, curr: object, index: number) => {
    const groupIndex = Math.floor(index / 8)
    // acc数组当前索引没值就将当前索引赋值空数组
    if (!acc[groupIndex]) acc[groupIndex] = []
    acc[groupIndex].push(curr)
    return acc
  }, [])
  if (type === 'contract') contractTypeList.value = newArray
  else otherContractTypeList.value = newArray
}
// 获取合同字典数据
const getAIContractDictionaryFn = async (contractItem = { code: 'Scene' }) => {
  const { code, data } = await getAIContractDictionary({ code: contractItem.code }).finally(() => {})
  if (code === 200) {
    if (contractItem.code === 'Scene') {
      commonFn(data, 'contract')
    } else {
      params.type = contractItem.text
      // 其他生活场景
      if (data?.length > 1) {
        commonFn(data, 'otherContract')
        otherRef.value.change()
      } else {
        params.name = data[0].text
        // 获取合同Prompt
        const { code, data: promptData } = await getAIContractPrompt({ code: data[0].code }).finally(() => {})
        if (code === 200) contractPrompt.value = promptData
      }
    }
  }
}
const otherContractFn = async (otherContract: object) => {
  params.name = otherContract.text
  // 获取合同Prompt
  const { code, data } = await getAIContractPrompt({ code: otherContract.code }).finally(() => {})
  if (code === 200) {
    contractPrompt.value = data
    otherRef.value.change()
  }
}
onLoad(() => {
  getAIContractDictionaryFn()
})
const params = reactive({
  type: '',
  name: '',
  prompt: '',
})
const generateContractFn = () => {
  if (!contractPrompt.value) return
  params.prompt = contractPrompt.value
  Router.push('ai_contract_preview', params)
  // 初始化
  contractPrompt.value = ''
  params.type = ''
  params.name = ''
  params.prompt = ''
}
</script>

<style lang="less" scoped>
.wrap {
  padding: 22rpx 24rpx 0;
  .advertise {
    height: 194rpx;
  }
  .nav_bar {
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
    border-radius: 24rpx;
  }
  .swiper_item {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
    row-gap: 28rpx;
    justify-items: center;
    align-items: center;
    padding-top: 20rpx;
    .contract_item {
      .contract_bg {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin: 0 auto;
      }
      .contract_name {
        font-weight: 400;
        font-size: 20rpx;
        color: rgba(0,0,0,0.65);
        line-height: 28rpx;
        margin-top: 8rpx;
      }
    }
  }
  /deep/wx-swiper .wx-swiper-dot {
    width: 40rpx;
    height: 4rpx;
    border-radius: 4rpx;
    margin-right: 4rpx;
  }
  /deep/wx-swiper .wx-swiper-dot-active {
    width: 40rpx;
    height: 4rpx;
    border-radius: 4rpx;
  }
  .tip {
    font-weight: 500;
    font-size: 28rpx;
    color: #51aafc;
    line-height: 40rpx;
    margin: 24rpx 0 20rpx;
  }
}
</style>
